<script lang="ts" setup>
import { ref, reactive, onUpdated, computed, onMounted, nextTick } from 'vue';
import { dialogProps } from './dialog';
defineOptions({ name: 'WindowsDialog' });
const props = defineProps(dialogProps);
const wrapper = ref();
const header = ref();
const _config = reactive({
  disX: 0,
  disY: 0,
  minLeft: 0,
  maxLeft: 0,
  minTop: 0,
  maxTop: 0,
  prevLeft: 0,
  prevTop: 0,
  isFullScreen: false, // 全屏
  isminimize: false, // 最小化
  height: '',
  isLoad: false,
});
const _icon = ref('../../src/assets/icons/' + props.icon + '.png');
// const _icon = computed(() => {
//   return new URL('../../../assets/icons/' + props.icon + '.png', import.meta.url).href;
// });
const initDrag = () => {
  header.value.addEventListener('mousedown', onMousedown, false); //点击头部区域拖拽
};
const onMousedown = e => {
  if (_config.isFullScreen) return;
  _config.disX = e.clientX - header.value.offsetLeft;
  _config.disY = e.clientY - header.value.offsetTop;

  _config.minLeft = wrapper.value.offsetLeft - wrapper.value.offsetWidth / 2;
  _config.minTop = wrapper.value.offsetTop - wrapper.value.offsetHeight / 2;

  _config.maxLeft = props.target.offsetWidth - _config.minLeft - wrapper.value.offsetWidth;
  _config.maxTop = props.target.offsetHeight - _config.minTop - wrapper.value.offsetHeight;
  const { left, top } = getComputedStyle(wrapper.value);
  _config.prevLeft = parseFloat(left);
  _config.prevTop = parseFloat(top);

  document.addEventListener('mousemove', onMousemove, false);
  document.addEventListener('mouseup', onMouseup, false);
  document.body.style.userSelect = 'none'; //消除拖拽中选中文本干扰
};
const onMousemove = e => {
  let left = e.clientX - _config.disX;
  let top = e.clientY - _config.disY;

  if (-left > _config.minLeft) {
    left = -_config.minLeft;
  } else if (left > _config.maxLeft) {
    left = _config.maxLeft;
  }

  if (-top > _config.minTop) {
    top = -_config.minTop;
  } else if (top > _config.maxTop) {
    top = _config.maxTop;
  }
  wrapper.value.style.left = _config.prevLeft + left + 'px';
  wrapper.value.style.top = _config.prevTop + top + 'px';
};
const onMouseup = () => {
  document.removeEventListener('mousemove', onMousemove, false);
  document.removeEventListener('mouseup', onMouseup, false);
  document.body.style.userSelect = 'auto'; //恢复文本可选中
};
// 全屏
const fullscreen = () => {
  //let nowWidth = 1000;
  //let nowMarginTop = 0;
  if (_config.isFullScreen === false) {
    const cutHeight = (window.innerHeight - props.target.clientHeight) / 2;
    wrapper.value.style.left = '50%';
    wrapper.value.style.top = 'calc(50% - ' + cutHeight + 'px)';
    wrapper.value.style.width = props.target.clientWidth + 'px';
    wrapper.value.style.height = props.target.clientHeight + 'px';
    //wrapper.value.style.marginTop = 0;
    _config.isFullScreen = true;
  } else {
    wrapper.value.style.height = _config.height + 'px';
    wrapper.value.style.width = props.width + 'px';
    //wrapper.value.style.marginTop = nowMarginTop;
    _config.isFullScreen = false;
  }
};
const close = () => {
  // emits('update:show', false);
  // emits('close');
  //this.$el.parentNode.removeChild(this.$el);
};
nextTick(() => {
  if (props.show && !_config.isLoad) {
    initDrag();
    _config.isLoad = true;
    _config.height = wrapper.value.offsetHeight;
    wrapper.value.style.height = _config.height + 'px';
  }
});
onMounted(() => {});
onUpdated(() => {});
</script>

<template>
  <transition enter-active-class="animate__animated animate__fadeIn animate__fast" leave-active-class="animate__animated animate__fadeOut animate__fast">
    <div ref="wrapper" class="windows-dialog" :style="{ width: width + 'px' }" v-if="show">
      <div ref="header" class="windows-dialog__header">
        <!-- 头部区域 -->
        <div class="drag-bar-header-title">
          <div class="title-left">
            <el-image style="width: 20px" :src="_icon" fit="contain" />
            <span>{{ title }}</span>
          </div>
          <div class="title-right">
            <div class="title-right-btn" @click="fullscreen">
              <el-icon><Close /></el-icon>
            </div>
            <div class="title-right-btn" @click="close">
              <el-icon><Close /></el-icon>
            </div>
          </div>
        </div>
        <div class="drag-bar-header-operate">
          <div class="operate-left">
            <slot name="operate" />
          </div>
          <div class="operate-right">
            <span>
              <el-icon :size="20" color="#409eff"><Refresh /></el-icon>
            </span>
          </div>
        </div>
        <div class="drag-bar-header-crumbs">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>系统应用</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="windows-dialog__content">
        <!-- 主内容区域 -->
        <slot name="default" />
      </div>
      <div class="windows-dialog__footer">
        <!-- 底部区域 -->
        <slot name="footer" />
      </div>
    </div>
  </transition>
</template>

<style>
.drag-bar-header-operate .operate-left > * {
  margin-right: 30px;
}
</style>
<style lang="scss" scoped>
.windows-dialog {
  position: fixed;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background: rgba(240, 243, 249, 1);
  transition: width 0.2s linear, height 0.2s linear;
  overflow: hidden;
}
.windows-dialog__header {
  //height: 120px;
  .drag-bar-header-title {
    padding: 5px;
    .title-left {
      display: flex;
      align-items: center;
      font-size: 12px;
      height: 20px;
      span {
        margin-left: 5px;
      }
    }
    .title-right {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      > .title-right-btn {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover {
          color: #fff;
          background: #409eff;
        }
        &:last-child {
          border-top-right-radius: 5px;
        }
      }
    }
  }
  .drag-bar-header-operate {
    padding: 0px 20px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .operate-left {
      display: flex;
      > * {
        margin-right: 30px;
      }
    }
  }
  .drag-bar-header-crumbs {
    .el-breadcrumb {
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
      background: #ffffff;
      padding: 10px;
    }
  }
}
.windows-dialog__content {
  background-color: #fff;
  min-height: 300px;
  flex: 1;
}
.windows-dialog__footer {
  /* background-color: #fff; */
  //height: 50px;
}
</style>
